<template>
  <div>
    <el-container>
      <!-- 页头 -->
      <el-header>订单分配员工</el-header>
      <el-main>
            <div>
              <!-- 订单信息表格 -->
              <el-table :data="orders" style="width: 100%">
                <el-table-column prop="typeId" label="用户选择的废品大类" width="180"></el-table-column>
                <el-table-column prop="userId" label="用户id" width="180"></el-table-column>
                <el-table-column prop="createTime" label="预约时间" width="180"></el-table-column>
                <el-table-column prop="address" label="收货人地址" width="180"></el-table-column>
                <el-table-column prop="phone" label="收货人电话" width="180"></el-table-column>
                <el-table-column prop="name" label="收货人姓名" width="180"></el-table-column>
                <el-table-column label="操作" width="350">
                  <template #default="scope">
                    <!-- 分配员工按钮 -->
                    <el-button type="danger" size="small" @click="readyAssEmploy(scope.row)">分配员工</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
      </el-main>

      <!-- 分配员工对话框 -->
      <el-dialog v-loading="loading" title="分配员工" :visible.sync="assEmployWindow" width="80%">
        <!-- 订单号输入框 -->
        订单号:<el-input placeholder="订单号" v-model="orderNum" :disabled="true">
        </el-input></br>
        <!-- 员工选择下拉框 -->
        <el-select v-model="selectEmployId" placeholder="请选择">
          <el-option v-for="item in usefulEmploy" :key="item.id" :label="item.employeName" :value="item.accountId">
          </el-option>
        </el-select>
        <!-- 立即分配按钮 -->
        <el-button @click="assEmploy" type="success" round>立即分配</el-button>
        <!-- 关闭对话框按钮 -->
        <el-button @click="assEmployWindow = false" type="danger" round>关闭</el-button>
      </el-dialog>
    </el-container>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum"
      :page-sizes="[3, 4, 5]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "AssEmploy",
    data() {
      return {
        selectEmployId: null, // 选中的员工ID
        orderNum: null, // 当前操作的订单号
        assEmployWindow: false, // 分配员工对话框的显示状态
        loading: false, // 加载状态
        orders: [], // 订单列表
        usefulEmploy: [], // 可用的员工列表
        page: {
          pageNum: 1, // 当前页码
          pageSize: 5, // 每页显示条数
          total: 0 // 总条数
        },
        stationId: null // 站点ID
      };
    },
    methods: {
      // 显示驳回理由
      showRefuseReason(row) {
        this.$message.success(row.refuseReason)
      },
      // 准备分配员工
      readyAssEmploy(row) {
        this.orderNum = row.id
        this.showAllEmploy()
        this.assEmployWindow = true;
      },
      // 获取可用的员工列表
      showAllEmploy() {
        this.$http.get("/staff/employee/findUsefulHandler").then(resp => {
          this.usefulEmploy = resp.data.data
        })
      },
      // 分配员工
      assEmploy() {
        // console.log("选择的员工的账号id:"+this.selectEmployId)
        this.$http.post("/order/tOrder/assignmentEmployee/", {
            employeeId: this.selectEmployId,
            orderNum: this.orderNum
        }).then(resp => {
          if (resp.data.code === 200) {
            // 重新加载订单
            this.loadAllOrders(this.page.pageNum, this.page.pageSize)
            this.$message.success(resp.data.message);
          } else {
            this.$message.error(resp.data.message);
          }
        });
        this.assEmployWindow = false;
      },
      // 格式化订单状态
      formatState(row) {
        switch (row.state) {
          case 0:
            return "待审查";
          case 1:
            return "已通过";
          default:
            return "未知";
        }
      },
      // 处理每页显示条数变化
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.loadAllOrders(this.page.pageNum, this.page.pageSize);
      },
      // 处理页码变化
      handleCurrentChange(pageNum) {
        this.page.pageNum = pageNum;
        this.loadAllOrders(this.page.pageNum, this.page.pageSize);
      },
      // 加载订单列表
      loadAllOrders(pageNum, pageSize) {
        this.orders = null
        this.$http.get("/order/tOrder/findUnAssByStationId", {
          params: {
            id: this.stationId,
            pageNum: pageNum,
            pageSize: pageSize
          }
        }).then(response => {
          if (response.data.code == 200) {
            const result = response.data.data;
            // 更新分页数据
            this.page.pageNum = result.current;
            this.page.pageSize = result.size;
            this.page.total = result.total;
            this.orders = result.records;
          } else {
            this.$message.error(response.data.message)
          }
        });
      },
    },
    created(){
      // 从本地存储获取站点ID
      this.stationId = localStorage.getItem('stationId');
      // 加载订单
      this.loadAllOrders(this.page.pageNum, this.page.pageSize);
    }
  };
</script>

<style scoped>

</style>
